<template>
  <div class="q-my-md row justify-center a-pagination">
    <q-pagination v-if="max > 1"
                  :value="parseInt(page)"
                  :max="max"
                  :max-pages="$q.screen.gt.md ? 8 : 4"
                  @input="onInput"
                  @change="$emit('change', $event)" direction-links/>
  </div>
</template>

<script>
    export default {
      name: 'aPagination',
      props: {
        page: {
          type: [Number, String],
          required: true
        },
        max: {
          type: Number,
          required: true
        },
        // maxPages: {
        //   type: Number,
        //   required: false,
        //   default: 8
        // },
        type: {
          type: String,
          required: false,
          default: 'page'
        }
      },
      data () {
        return {
        }
      },
      computed: {
      },
      watch: {
      },
      methods: {
        onInput (page) {
          const query = {}

          query[this.type] = page

          this.$router.push(this.getRoute({ query }))
          this.$emit('input', page)
        }
      }
    }
</script>

<style lang="stylus">
  .a-pagination button
    @media screen and (max-width 800px)
      margin 0 10px!important
</style>
